<template>
    <div class="app-container">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
            <el-row>
                <el-input class="marginRB10" v-model="listQuery.user_code" placeholder="用户ID" style="width:200px;" clearable></el-input>
                <el-input class="marginRB10" v-model="listQuery.nickname" placeholder="用户昵称" style="width:200px;" clearable></el-input>
                <el-select v-model="listQuery.status" placeholder="审核状态" clearable>
                    <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.label"
                        :value="item.id">
                    </el-option>
                </el-select>
                <el-input class="marginRB10" v-model="listQuery.name" placeholder="技能名称" style="width:200px;" clearable></el-input>
                <!-- <el-select v-model="listQuery.name" placeholder="技能名称" clearable>
                    <el-option
                        v-for="item in skillList"
                        :key="item.id"
                        :label="item.label"
                        :value="item.id">
                    </el-option>
                </el-select> -->
                <el-button   el-button type="primary" @click="searchList" icon="el-icon-search" class="marginRB10">搜索</el-button>
            </el-row>
            </div>
            <div class="item">
            <el-table v-loading="listLoading" ref="dataList" :data="menuList" style="margin-bottom: 20px;" border
                        :tree-props="{children: 'children', hasChildren: 'hasChildren'}" tooltip-effect="dark">
                <el-table-column prop="id" label="序号" width="80"></el-table-column>
                <el-table-column prop="user_code" label="用户ID"></el-table-column>
                <el-table-column prop="nickname" label="用户昵称"></el-table-column>
                <el-table-column prop="game_name" label="技能名称"></el-table-column>
                <el-table-column prop="picture" label="技能图片">
                    <template slot-scope="scope">
                        <el-popover max-width="420" placement="right" trigger="hover">
                            <img :src="scope.row.picture" alt="" style="max-width: 200px;max-height: 200px">
                            <img slot="reference" :src="scope.row.picture" alt="" style="width: 50px;">
                        </el-popover>
                    </template>
                </el-table-column>
                
                <el-table-column prop="game_level" label="段位等级"></el-table-column>
                <el-table-column prop="game_service" label="游戏区服"></el-table-column>
                <el-table-column prop="label" label="技能标签"></el-table-column>
                <el-table-column prop="introduction" label="技能介绍" show-overflow-tooltip></el-table-column>
                <el-table-column prop="sounds" label="技能语音介绍" width="250">
                    <template slot-scope="scope">
                        <audio :src="scope.row.sounds" controls></audio>
                    </template>
                </el-table-column>
                <el-table-column prop="updated_at" label="提交认证日期"></el-table-column>
                <el-table-column prop="status" label="审核状态">
                    <template slot-scope="scope">
                        <span>{{ scope.row.status === 0 ? '待审核' : scope.row.status === 1 ? '已通过' : '未通过' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="refund_message" label="审核未通过原因"></el-table-column>
                <el-table-column label="操作" prop="date" width="300">
                    <template slot-scope="scope">
                        <el-button
                            v-if="scope.row.status === 0"
                            icon="el-icon-edit"
                            plain
                            size="small"
                            type="primary"
                            @click="handleBan(scope.row)"
                        >审核
                        </el-button>
                        <!-- <el-button
                            v-else
                            icon="el-icon-delete"
                            plain
                            size="small"
                            type="danger"
                            @click="handleRevocation(scope.row)"
                        >撤销审核
                        </el-button> -->
                    </template>
                </el-table-column>
    
            </el-table>
            <!-- 分页 -->
            <cus-pagination
                v-show="total > 0"
                :total="total"
                :page.sync="listQuery.page"
                :limit.sync="listQuery.perPage"
                @pagination="getList"
            />
            </div>
        </el-card>

        <!-- 封禁账号 -->
        <el-dialog
            title="审核"
            width="30%"
            :close-on-click-modal="false"
            :visible.sync="banIpDialogVisible"
            @close="handleDialogClose('banReasonForm')"
            >
            <el-form :model="banReasonForm" ref="banReasonForm" class="demo-ruleForm">
                <el-form-item label="审核结果" prop="status" :rules="[{ required: true, message: '请选择' }]">
                    <el-radio-group v-model="banReasonForm.status">
                        <el-radio :label="1">审核通过</el-radio>
                        <el-radio :label="2">审核拒绝</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item v-if="banReasonForm.status === 2" label="审核原因" prop="message" :rules="[{ required: true, message: '审核原因不能为空' }]">
                    <el-input type="text" v-model="banReasonForm.message" placeholder="请输入审核原因"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="banIpDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="confirmBanIp('banReasonForm')"
                        >提 交</el-button
                    >
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 撤销审核 -->
        <el-dialog
            :visible.sync="deleteDialogVisible"
            title="撤销审核"
            width="435px"
        >
            <span style=""><em style="font-style: normal; color: red">确定撤销审核吗？</em></span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="deleteDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleConfirmDel">确 定</el-button>
            </span>
        </el-dialog>
        
    </div>
</template>
  
<script>
  import {listData, abilityVerify, abilityCancel} from '@/api/playManagement'
  
    export default {
        data() {
        return {
            form: {},
            visible: false,
            banReasonForm: {
                message: undefined,
                status: undefined,
                id: undefined
            },
            banIpDialogVisible: false,
            deleteDialogVisible: false,
            options: [
                {
                    id: 0,
                    label: '审核中'
                },
                {
                    id: 1,
                    label: '审核通过'
                },
                {
                    id: 2,
                    label: '审核拒绝'
                }
            ],
            skillList: [],
            listLoading: true,
            total: 0,
            listQuery: {
                page: 1,
                perPage: 10,
                nickname: undefined,
                user_id: undefined,
                name: undefined,
                status: undefined //审核状态0:审核中1:审核通过2:审核拒绝
            },
            menuList: [],
            dialogFormVisible: false,
            dialogStatus: '',
            titleMap: {
                update: '编辑',
                create: '增加'
            },
            form: {
            id: undefined,
            name: undefined,
            },
            rules: {
                name: [{required: true, message: '请输入名字', trigger: 'blur'}],
            },
            row_status: undefined
        }
        },
        created() {
        this.getList()
        },
        methods: {
            getList() {
                this.listLoading = true
                for (let key in this.listQuery) {
                    this.listQuery[key] =
                    this.listQuery[key] === "" ? undefined : this.listQuery[key];
                }
                listData(this.listQuery).then(({data: {data, total}}) => {
                    this.menuList = data
                    this.total = total
                    this.listLoading = false
                })
            },
            searchList() {
                this.listQuery.page = 1
                this.getList()
            },
            postAbilityVerify(data) {
                abilityVerify(data).then(res => {
                    if(res.code === 200) {
                        this.$message({
                            type: 'success',
                            message: '操作成功'
                        })
                        this.banIpDialogVisible = false
                        this.getList()
                    }
                })
            },
            postAbilityCancel(data) {
                abilityCancel(data).then(res => {
                    if(res.code === 200) {
                        this.$message({
                            type: 'success',
                            message: '操作成功'
                        })
                        this.deleteDialogVisible = false
                        this.getList()
                    }
                })
            },
            confirmBanIp() {
                this.$refs['banReasonForm'].validate(async valid => {
                    if (valid) {
                        this.postAbilityVerify(this.banReasonForm)
                    }
                })
            },
            handleBan(row) {
                this.banReasonForm = JSON.parse(JSON.stringify(row))
                this.banIpDialogVisible = true
            },
            handleRevocation(row) {
                this.del_ids = row.id;
                this.row_status = row.status
                this.deleteDialogVisible = true;
            },
            handleConfirmDel() {
                this.postAbilityCancel({
                    id: this.del_ids
                })
            },
            handleDialogClose() {
                this.banReasonForm = {
                    message: undefined,
                    status: undefined,
                    id: undefined
                }
            }
        }
    }
</script>
<style scoped lang="scss">
  [v-cloak] {
    display: none;
  }
  
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  
  .clearfix:after {
    clear: both
  }
  
  .box-card {
    width: 100%;
  }
  
  .demo-form-inline {
    float: right;
  }
  ::v-deep {
    .el-card__header {
        padding-bottom: 0;
    }
  } 
</style>
  